<template>
	<layout>
		<view class="big_box">
			<!-- 报名信息 -->
			<view v-show="indexbar" class="content">
				<!-- <view v-show="false" class="content"> -->
				<h3 align="center">请填写您的信息</h3>
				<!-- form表单 -->
				<u--form labelPosition="left" :model="voteInfo" :rules="rules" ref="uForm">

					<!-- <u-form-item label="标题" prop="title" borderBottom>
						<u--input v-model="voteInfo.title" border="none" placeholder="请输入标题" />
					</u-form-item> -->
					<u-form-item label="嘉宾姓名" prop="title" borderBottom>
						<u--input v-model="voteInfo.nickName" border="none" placeholder="请输入您的姓名" maxlength='4' />
					</u-form-item>
					<!-- 拜年内容 -->
					<u-form-item label="新春寄语" prop="title" borderBottom>
						<u--textarea v-model="voteInfo.desc" placeholder="请输入拜年内容" count></u--textarea>
					</u-form-item>

					<!-- 加三个框 -->
					<view class="three_box">
						<view class="container">
							<!-- 报名人数框 -->
							<view class="box" @click="selectPackage(1)" :class="{ 'selected': selectedPackage === 1 }">
								<view class="label">普通包装</view>
								<view class="value">简单包装</view>
							</view>

							<!-- 访问量框 -->
							<view class="box" @click="selectPackage(2)" :class="{ 'selected': selectedPackage === 2 }">
								<view class="label">豪华包装</view>
								<view class="value">人工精修</view>
							</view>

							<!-- 累计人数框 -->
							<view class="box" @click="selectPackage(3)" :class="{ 'selected': selectedPackage === 3 }">
								<view class="label">不包装</view>
								<view class="value">真实自然</view>
							</view>
						</view>
						<!-- 选择哪个？-->
						<view class="selected-package">
							<text>已选择：</text>
							<text>{{ getSelectedPackageText }}</text>
						</view>
					</view>

					<u-form-item label="上传视频" prop="title" borderBottom>
						<u-upload @beforeRead="beforeReadVideo" :fileList="videoCover" @afterRead="afterRead"
							@delete="deletePic" name="file" multiple :previewFullImage="true" accept="video"
							class="video_upload" width="150" height="150"></u-upload>
					</u-form-item>

				</u--form>
				<u-button @click="submit" size="large" class="footer-btn"
					color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))">提交</u-button>
			</view>
			<!-- 付钱弹窗 -->
			<view v-show="isshowbox" class="showflag">
				<view class="isshowcontent">
					<!-- 支付方式头 -->
					<span :class="this.payType==2?'ico-2':'ico-1'" style=" margin-left: 10vh;display: inline-block;
					width: 130px;
					height: 38px;
					vertical-align: middle;
					margin-top: 12px;"> <u-loading-icon :show="jiazai"></u-loading-icon>
					</span>
					<!-- 付款金额 -->

					<span class="ico_log order-price"
						style="display: block;margin-top: 3%;font-size: 25px;color: red;">￥{{this.payPrice}}</span>
					<!-- <img :src="this.querimg==''?'http://localhost:8989/enQrcode?url=https://qr.alipay.com/fkx10697nxhnxfph89ua1a1':this.querimg"
								alt=""> -->
					<!-- 提示 -->
					<span class="icon_tishi">提示:由于<b style="color: red;">费率 </b>原因, <br> 请您按照实际金额支付</span>
					<br>

					<img src="/static/images/qrcode.png" alt="" class="payImage">

					<view class="payBtn">
						<!-- 取消支付 -->
						<button type="warn" size="mini" style="" @click="closePay()">取消支付</button>
						<!-- 我已支付 -->
						<button type="primary" size="mini" @click="checkPay()" :loading="loading" :disabled="isPay"
							style="margin-left: 5px;">我已支付</button>

					</view>
				</view>
			</view>
			<!-- 选择视频模板 -->
			<view v-show="istemp" class="temp_centont">

				<h3 align="center">选择一款您喜欢的模板</h3>
				<!-- 加三个框 -->
				<view class="three_box">
					<view class="container">
						<!-- 报名人数框 -->
						<view class="box" @click="selectVideoTemps(1)" :class="{ 'selected': selectVideoTemp === 1 }">
							<view class="label">模板1</view>
							<view class="value">模板名字</view>
						</view>

						<!-- 访问量框 -->
						<view class="box" @click="selectVideoTemps(2)" :class="{ 'selected': selectVideoTemp === 2 }">
							<view class="label">模板2</view>
							<view class="value">模板名字</view>
						</view>

						<!-- 累计人数框 -->
						<view class="box" @click="selectVideoTemps(3)" :class="{ 'selected': selectVideoTemp === 3 }">
							<view class="label">模板3</view>
							<view class="value">默认</view>
						</view>
					</view>
					<!-- 选择哪个？-->
					<view class="selected-package">
						<text>已选择：模板{{selectVideoTemp}} 价格: ￥9.9</text>
						<!-- <text>{{ getSelectedVideoTemp }}</text> -->
						<video :src="getSelectedVideoTemp" controls mode="widthFix"
							@click="makeFullScreen(index)"></video>
					</view>
				</view>
				<u-button @click="submittemp" size="large" class="footer-btn"
					color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))">就选它</u-button>
			</view>

		</view>

	</layout>
</template>

<script>
	import vote from '@/util/vote.js'
	import api from "@/util/api.js"
	import layout from '@/components/layout/index.vue'
	import uniCard from '@/components/uni-card/uni-card.vue'

	import {
		mapActions
	} from 'vuex'
	import message from '../../store/modules/config'

	export default {
		data() {
			return {
				selectedPackage: 3, // 默认选中普通包装
				// 微信支付上面的加载框
				jiazai: true,
				// 选择模板的弹窗 默认为false
				istemp: false,
				// 视频提交的选项 默认为true
				indexbar: true,
				// 标题
				title: "是否需要包装？",
				// 轮播图
				lunboList: [],
				voteInfo: {
					// "title": '',
					"nickName": '',
					"desc": ''
				},
				list: [{
						name: '普通包装',
						value: 'videoType1'
					},
					{
						name: '精品包装',
						value: 'videoType2'
					},
					{
						name: '不包装',
						value: 'videoType3'
					},
					{
						name: '不包装',
						value: 'videoType3'
					},
				],
				// 选择视频类型 选择框
				choicePay: false,
				// 规则
				rules: {
					'voteInfo.title': {
						type: 'string',
						required: true,
						message: '请填写标题',
						trigger: ['blur', 'change']
					}
				},
				// 上传的视频
				videoCover: [{
					//封面图片
					"url": ''
				}],
				// 付钱 弹窗
				isshowbox: false,
				//支付价格
				payPrice: "正在生成订单...",
				// 二维码内容
				// querimg: '/static/images/qrcode.png',
				// 已支付按钮
				isPay: false,
				/* 支付类型 1微信 2 支付宝 */
				payType: 1,
				// 加载
				loading: false,
				// 轮询的对象
				timer: null,
				// 上传对象的even
				uploadEven: null,
				// 视频模板的编号 默认为3
				selectVideoTemp: 3,
				data: {},
				// 录屏须知 默认打开
				takeVideo: true,

			}
		},
		onLoad() {
			const {
				setNavigationBarTitle
			} = this

			setNavigationBarTitle();
			// 进来先通知用户
			this.takeVideoNow();

			this.init();
			// vote.isLogin()
		},
		components: {
			uniCard,
			layout,
		},
		methods: {
			// 标题
			...mapActions(['setNavigationBarTitle']),

			// 录屏须知
			takeVideoNow() {
				// 先找缓存
				const alrets = uni.getStorageSync("videoAlert");

				// 第一次进来 弹出窗口
				if (alrets == '') {
					uni.showModal({
						// 不显示取消按钮
						confirmText: "我已知晓",
						cancelText: "不再提示",
						title: "录制须知",
						content: "因模板为横屏,请您务必横屏录制呦",
						success(res) {
							if (res.confirm) {
								console.log("知晓 ");
								uni.setStorageSync("videoAlert", "12344")
							} else if (res.cancel) {
								console.log("不在提示");
								uni.setStorageSync("videoAlert", "12344")
							}
						}
					})
				}

			},
			// 初始化
			init() {
				const data = vote.webInit();

			},
			// 打开网页
			openWeb(url) {
				console.log("跳转");
				uni.navigateTo({
					url: '/pages/votes/baoming?url=' + url
				});
			},
			// 删除图片
			deletePic(event) {
				this.videoCover.splice(event.index, 1);
			},

			// 上传后
			async afterRead(event) {
				// // 上传对象抛出去
				this.uploadEven = event;

				// 选择了哪个套餐？
				if (this.selectedPackage == 1) {
					console.log("9.9套餐");
					// 打开付钱的弹窗
					this.isshowbox = true;
					// 该付多少钱？
					this.payPrice = 9.9;
					// 关闭主页面的
					this.indexbar = false;
					// 普通包装
					// 创建订单
					return this.createOrder();
				} else if (this.selectedPackage == 2) {
					console.log("99套餐");
					// 该付多少钱？
					this.payPrice = 99.0;
					// 打开付钱的弹窗
					this.isshowbox = true;
					// 关闭主页面的
					this.indexbar = false;
					// 创建订单
					return this.createOrder();

				} else {
					console.log("免费", event);
					return this.uploadVideo(event);
				}
			},

			// 参数提交
			submit() {
				vote.isLogin()

				if (this.voteInfo.nickName == '') return vote.message('请填写您的姓名！', 'error');
				if (this.voteInfo.desc == '') return vote.message('说点什么吧~', 'error');
				// 视频上传给的响应
				const videoFile = JSON.parse(sessionStorage.getItem("videoFile"));
				// 没有录制 踢回去
				if (videoFile == null) return vote.message('还没有录制呦~', 'error');

				const data = {
					vCover: videoFile.cover = (videoFile.cover ? videoFile.cover : '默认封面'),
					vUrl: videoFile.url = (videoFile.url ? videoFile.url : '没上视频'),
					vTitle: '已经去掉了',
					vDesc: this.voteInfo.desc,
					nickName: this.voteInfo.nickName
				};

				// 获取参数  用户提交数据
				api.post("/vote/insertVote", data).then(res => {
					if (res.code != 200) return vote.message('开小差啦~请稍后重试', 'error')

					console.log(res.code);
					if (res.code == 200) {
						vote.message("提交成功!", "success")
						// 提交成功 页面跳转到视频
						setTimeout(uni.switchTab({
							url: '/pages/rankingList/index'
						}), 500)


					}
				})

			},
			//查询订单状态
			async checkOrder(data) {
				//轮询发送请求，查询订单状态
				// let orderStatus = await api.getPay("/checkOrder", data);


				// 返回数据
				return await api.getPay("/checkOrder", data);
			},
			//取消支付
			closePay() {
				// 弹窗和加载去掉
				this.clearOrder()
				// 关闭定时 如果有的话
				clearInterval(this.timer);
				// 打开主页面
				this.indexbar = true;
				vote.message("取消支付", "none", 860);
			},
			//我已支付
			async checkPay() {
				//开启加载框 禁用提交
				this.loading = true;
				this.isPay = true;
				//查询订单是否支付
				let orderStaus = this.checkOrder({
					orderId: this.orderId
				});
				// 拿到对象
				orderStaus.then(res => {
					orderStaus = res;
				})

				setTimeout(() => {
					if (orderStaus.code != 1) {
						vote.message('订单未支付!', "error", 1000);
						//打開按鈕
						this.isPay = false;
						this.loading = false;
					} else {
						// 上传视频到后台
						this.uploadVideo(this.uploadEven);
						//关闭弹窗
						this.clearOrder();
					}
				}, 3000);
			},
			//生成订单
			async createOrder() {

				let order = {
					payId: Date.parse(new Date()) / 1000,
					type: this.payType,
					price: this.payPrice,
					param: "whsc1234",
					isHtml: 0
				}
				order.sign = await api.getPay("/getSign", order);

				//生成订单
				let createOrder = await api.getPay("/createOrder", order);
				if (createOrder.code != 1) return vote.message("订单生成失败,请稍后重试!", "none");

				this.orderId = createOrder.data.orderId;
				this.payPrice = createOrder.data.reallyPrice;
				//加载二维码 改为静态生成
				// this.querimg = api.payUrl + "/enQrcode?url=" + createOrder.data.payUrl
				// 改变加载框
				this.jiazai = false
				// //二维码加载完成 倒计时1分钟 付费
				// 轮询判断
				this.countdown = 60;
				this.timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--
						// 轮询判断用户是否已支付
						let orderStaus = this.checkOrder({
							orderId: this.orderId
						});
						// 拿到对象
						orderStaus.then(res => {
							console.log("orderStaus订单状态：", res);
							// 等于1 支付成功
							if (res.code == 1) return clearInterval(this.timer);

						})


					} else {
						// 倒计时结束，处理逻辑
						clearInterval(this.timer);
					}
				}, 1000);



				//订单实际价格
				this.reallyPrice = createOrder.data.reallyPrice;
				this.payType = createOrder.data.payType;
				this.loading = false;
			},

			// 上传视频
			uploadVideo(event) {
				// 用户选择的模板 默认为3 不包装
				let videotemp = this.selectedPackage;
				// 为1的话 普通包装
				if (this.selectedPackage == 1) {
					// 普通模板的 1-1 1-2 1-3
					videotemp = this.selectedPackage + '-' + this.selectVideoTemp
					console.log(videotemp);
				}
				// 上传
				uni.uploadFile({
					url: api.ip + '/common/upload', // 仅为示例，非真实的接口地址
					filePath: event.file[0].url,
					name: 'file',
					header: {
						'Authorization': uni.getStorageSync('token'),
						'videotemp': videotemp
					},
					success: (res) => {
						const data = JSON.parse(res.data)

						// 上传失败直接返回信息
						console.log(data);
						if (data.code != 200) return vote.message("上传失败,请稍后重试!",
							'error');


						if (data.code == 200) vote.message('视频上传成功!', 'success');
						// 封面填上来
						// TODO 没弄完少 图片不能动态刷新
						// this.videoCover[0] = data.cover;
						this.videoCover.splice(0, 1, {
							"url": data.cover
						});
						sessionStorage.setItem("videoFile", JSON.stringify(data))
						console.log(data);
						console.log("上传后", this.videoCover);
					},
					error: (err) => {
						console.log("失败!");
					}
				});

			},
			// 清除订单信息
			clearOrder() {
				// 二维码去掉
				this.querimg = '';
				// 关闭单号
				this.orderId = "";
				// 关闭当前窗口
				this.isshowbox = false;
				// 支付状态取消为未支付
				this.isPay = false;
				// 去掉加载
				this.loading = false;
			},
			// 选择框
			selectPackage(packageType) {
				// 选择哪个套餐？
				this.selectedPackage = packageType;
				// 如果是普通包装的话 
				if (packageType == 1) {
					this.indexbar = false;
					this.istemp = true;
				}
			},
			// 模板选择框
			selectVideoTemps(videoTemp) {
				// 选择哪个套餐？
				this.selectVideoTemp = videoTemp;
			},
			// 视频选择框确定
			submittemp() {
				// 确定了之后 把框关闭即可
				this.istemp = false;
				//  主菜单打开
				this.indexbar = true
			}

		},
		computed: {
			getSelectedPackageText() {
				switch (this.selectedPackage) {
					case 1:
						return '普通包装';
					case 2:
						return '豪华包装';
					case 3:
						return '不包装';
					default:
						return '';
				}
			},
			getSelectedVideoTemp() {
				switch (this.selectVideoTemp) {
					case 1:
						return 'http://www.cctvwenhua.tv/video/2023bainian/41%20%E4%BD%95%E5%8D%A0%E8%B1%AA%E4%B8%A8%E8%91%97%E5%90%8D%E4%BD%9C%E6%9B%B2%E5%AE%B6%20%E4%B8%AD%E5%9B%BD%E7%AC%AC%E4%B8%80%E9%83%A8%E5%B0%8F%E6%8F%90%E7%90%B4%E5%8D%8F%E5%A5%8F%E6%9B%B2%E3%80%8A%E6%A2%81%E7%A5%9D%E3%80%8B%E4%B8%BB%E5%88%9B%EF%BC%9A%E7%A5%9D%E7%A6%8F%E5%A4%A7%E5%AE%B6%E5%9C%A8%E6%96%B0%E7%9A%84%E4%B8%80%E5%B9%B4%E9%87%8C%E9%98%96%E5%AE%B6%E5%B9%B8%E7%A6%8F%20%E6%8A%8A%E4%BC%98%E7%A7%80%E9%9F%B3%E4%B9%90%E4%BD%9C%E5%93%81%E4%BC%A0%E6%92%AD%E5%88%B0%E6%B5%B7%E5%A4%96.mp4';
					case 2:
						return 'http://www.cctvwenhua.tv/video/2023bainian/49%20%E8%A3%98%E8%8A%B8%E4%B8%A8%E4%BA%AC%E5%89%A7%E5%90%8D%E5%AE%B6%E8%A3%98%E6%B4%BE%E8%8A%B1%E8%84%B8%E5%88%9B%E5%A7%8B%E4%BA%BA%E8%A3%98%E7%9B%9B%E6%88%8E%E4%B9%8B%E5%A5%B3%EF%BC%9A%E7%A5%9D%E7%A6%8F%E5%8D%83%E5%AE%B6%E4%B8%87%E6%88%B7%E5%B9%B8%E7%A6%8F%E7%BE%8E%E6%BB%A1%20%E6%AC%A2%E6%AC%A2%E5%96%9C%E5%96%9C%E8%BF%87%E5%A4%A7%E5%B9%B4.mp4';
					case 3:
						return 'http://www.cctvwenhua.tv/video/2023bainian/13%20%E6%BD%AE%E7%99%BD%E4%B9%8B%E5%A3%B0%E5%90%88%E5%94%B1%E5%9B%A2%EF%BC%9A%E7%A5%9D%E5%85%A8%E7%90%83%E5%8D%8E%E4%BA%BA%E6%96%B0%E5%B9%B4%E5%BF%AB%E4%B9%90%20%E5%85%94%E5%B9%B4%E5%90%89%E7%A5%A5%E5%A6%82%E6%84%8F%EF%BC%81.mp4';
					default:
						return '';
				}
			}
		},
	}
</script>

<style scoped>
	/* 父元素 相对 */
	.big_box {
		display: flex;
		justify-content: center;
		align-items: center;
		/* 	设置高度为视窗高度，使内容垂直居中 */
		height: 67vh;
		/* //设置背景 */
		/* background-color: #b0b0b0; */
		/* background-color: #e12f0d; */
		/* 背景图 */
		/* background: url("@/static/images/banner/banner_baoming.jpg"); */
		/* or repeat-y */
		background-repeat: repeat;
		position: relative;
		top: 0.2vh;
		margin-bottom: 35vh;
	}

	.content {
		width: 80%; // 设置内容宽度
		/* height: 70%; */
		padding: 10px;
		background-color: #f0f0f0; // 设置背景颜色
		border-radius: 15px;
		position: relative;
		top: 5vh;

	}

	/* 支付类型 */
	.ico-2 {
		background: url('../../static/images/icons/alipay.jpg') no-repeat;
	}

	.ico-1 {
		background: url('../../static/images/icons/weixin.jpg') no-repeat;
	}

	/* 弹窗的样式 */
	.showflag {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		position: absolute;
		/* top: -2vh; */
		left: 0;
	}

	.isshowcontent {
		width: 70%;
		height: 50vh;
		background-color: #fff;
		margin-left: 2%;
		margin-top: 35%;
		border-radius: 25px;
		/* 绝对定位 往上提 */
		position: absolute;
		top: -17vh;
		left: 15%;

		.isshowcontent-box {
			display: flex;
		}
	}

	/* 订单价格 */
	.order-price {
		position: relative;
		left: 15vh;
	}

	/* 付款二维码 */
	.payImage {
		position: relative;
		left: 5vh;
		top: 3vh;
		/* width: 200px;
		height: 200px; */
	}

	/* 两个按钮 */
	.payBtn {
		position: relative;
		left: 5vh;
	}

	/* 上传视频预览按钮 */
	.u-upload__button {
		width: 100px;
		height: 100px;
	}

	/* 提示语句的位置 */
	.icon_tishi {
		position: absolute;
		top: 14vh;
		left: 8vh;
		z-index: 999;
	}

	/* 选择哪个包装？ */
	.uni-list-item {
		padding: 15px;
		border: 1px solid #ddd;
		/* 添加边框样式 */
		border-radius: 5px;
		/* 可以根据需要调整边框圆角 */
		margin-bottom: 10px;
		/* 添加间距 */
	}

	.selected {
		background-color: #e0e0e0;

	}

	.selected-package {
		margin-top: 20px;
	}

	.select_box {
		border: solid 1px #000;
		border-radius: 5px;
		margin-left: 5px;
	}

	.three_box {
		/* width: 52vh;
		height: 21vh; */
	}

	/* // 上面的3排 */
	.container {
		display: flex;
		justify-content: space-around;
		padding: 20px;
		/* 调整内边距 */
	}

	/* // 三个框 */
	.box {
		text-align: center;
		padding: 10px;
		border: 1px solid #c3c3c3;
		/* 添加阴影效果 */
		box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.2);
		/* background-color: #FFF; */
		border-radius: 8px;
		flex: 1;
		margin-right: 5px;
	}

	/* 模板选择弹窗 */
	.temp_centont {
		width: 80%; // 设置内容宽度
		/* height: 70%; */
		padding: 10px;
		background-color: #f0f0f0; // 设置背景颜色
		border-radius: 15px;
		position: relative;
		/* top: -5vh; */
	}
</style>